<template>
  <div class="app-container">
    <el-tabs ref="tabs" v-model="activeName">
      <el-tab-pane name="first">
        <el-form :model="queryParams" ref="assessListForm" size="small" :inline="true"
                 label-width="68px">
          <el-form-item prop="assessName">
            <el-input
              v-model="queryParams.nickName"
              placeholder="员工姓名/工号"
              clearable
              @keyup.enter.native="handleQuery"
              style="width: 150px"
            />
          </el-form-item>
          <input type="text" style="display: none;">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" type="warning" @click="resetQuery">重置</el-button>
          </el-form-item>

        </el-form>
        <el-table v-loading="loading" :data="assessEmpInfoList" style="width: 100%">
          <el-table-column prop="nickName" align="center" label="姓名"></el-table-column>
          <el-table-column prop="jobNo" align="center" label="工号"></el-table-column>
          <el-table-column prop="deptName" align="center" label="部门"></el-table-column>
          <el-table-column prop="stationName" align="center" label="岗位"></el-table-column>
          <el-table-column prop="status" align="center" label="员工状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status === '3'">试用</span>
              <span v-if="scope.row.status === '4'">正式</span>
            </template>
          </el-table-column>
          <el-table-column prop="workNature" align="center" label="工作性质"></el-table-column>
          <el-table-column prop="assessName" align="center" label="最近考核计划"></el-table-column>
          <el-table-column prop="score" align="center" label="最近考核分数"></el-table-column>
          <el-table-column prop="grade" align="center" label="最近考核等级"></el-table-column>
          <el-table-column prop="assessLimit" align="center" label="考核次数"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="secondInfoClick(scope.row.uid)">查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList()"
        />
      </el-tab-pane>
      <el-tab-pane  name="second">
        <div v-if="scoreForm.assessmentEmpList.length > 0">
          <el-button style="float: left;margin-right: 30px" @click="goFirst()">返回</el-button>
          <div style="margin-left: 100px">
            <h2>绩效详情</h2>
          </div>
          <el-card class="box-card">
            <div slot="header" class="clearfix" style="text-align: center">
              <center>
                <el-descriptions style="float: left" :column="4">
                  <el-descriptions-item label="姓名">
                    {{ scoreForm.assessmentEmpList[0].nickName }}
                  </el-descriptions-item>
                </el-descriptions>
                <el-descriptions style="float: left" :column="3">
                  <el-descriptions-item label="工号">
                    {{ scoreForm.assessmentEmpList[0].jobNo }}
                  </el-descriptions-item>
                  <el-descriptions-item label="工作状态">
                    <span v-if="scoreForm.assessmentEmpList[0].workStatus === '3'">试用</span>
                    <span v-if="scoreForm.assessmentEmpList[0].workStatus === '4'">正式</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="所属部门">
                    {{ scoreForm.assessmentEmpList[0].deptName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="岗位">
                    {{ scoreForm.assessmentEmpList[0].stationName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="工作性质">
                    {{ scoreForm.assessmentEmpList[0].workNature }}
                  </el-descriptions-item>
                  <el-descriptions-item label="电话">
                    {{ scoreForm.assessmentEmpList[0].phone }}
                  </el-descriptions-item>
                </el-descriptions>
              </center>
            </div>
            <el-form ref="scoreForm" v-loading="loading" :model="scoreForm" :inline="true" class="demo-form-inline">
              <el-table
                border
                :data="scoreForm.assessmentEmpList"
                style="width: 100%">
                <el-table-column align="center" prop="createTime" label="考核开始时间"></el-table-column>
                <el-table-column align="center" prop="assessDeadLine" label="考核截至时间"></el-table-column>
                <el-table-column align="center" prop="assessName" label="考核计划"></el-table-column>
                <el-table-column align="center" prop="assessMode" label="考核类型"></el-table-column>
                <el-table-column align="center" prop="assessStatus" label="考核状态">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.assessStatus === '0'" type="info">待处理</el-tag>
                    <el-tag v-if="scope.row.assessStatus === '1'" type="success">已完成</el-tag>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="sumScore" label="考核评分"></el-table-column>
                <el-table-column align="center" prop="grade" label="绩效等级"></el-table-column>
                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="thirdInfoClick(scope.row)">查看
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

            </el-form>
          </el-card>

        </div>

      </el-tab-pane>
      <el-tab-pane name="third">
        <div v-if="empInfoList.length > 0">
          <el-button style="float: left;margin-right: 30px" @click="goSecond()">返回</el-button>
          <div style="margin-left: 100px">
            <h2>绩效详情单</h2>
          </div>
          <el-card  class="box-card">
            <div slot="header" class="clearfix" style="text-align: center">
              <center>
                <el-descriptions :colon="false" style="float: left" :column="5">
                  <el-descriptions-item label="姓名">
                    {{empInfoList[0].empName}}
                  </el-descriptions-item>
                  <el-descriptions-item label="工号">
                    {{empInfoList[0].jobNo}}
                  </el-descriptions-item>
                  <el-descriptions-item label="考核周期">
                    {{empInfoList[0].assessPeriod}}
                  </el-descriptions-item>
                  <el-descriptions-item label="考核方案">
                    {{empInfoList[0].assessTemName}}
                  </el-descriptions-item>
                  <el-descriptions-item >
                    <el-button style="float: right; padding: 3px 0" @click="empInfoFlow(empInfoList[0].aid,empInfoList[0].uid)" type="text">查看考核流程</el-button>
                  </el-descriptions-item>
                  <el-descriptions-item label="部门">
                    {{empInfoList[0].deptName}}
                  </el-descriptions-item>
                  <el-descriptions-item label="岗位">
                    {{empInfoList[0].stationName}}
                  </el-descriptions-item>
                  <el-descriptions-item label="考核名称">
                    {{empInfoList[0].assessName}}
                  </el-descriptions-item>
                  <el-descriptions-item label="考核结束时间">
                    {{
                      parseTime(empInfoList[0].assessDeadline, '{y}-{m}-{d}')
                    }}
                  </el-descriptions-item>
                </el-descriptions>
              </center>
            </div>
            <el-table
              border
              v-loading="loading"
              :data="empInfoList"
              style="width: 100%">
              <el-table-column align="center" prop="targetLabel" label="指标名称"></el-table-column>
              <el-table-column align="center" prop="weight" label="指标权重">
                <template slot-scope="scope">{{ scope.row.weight + ' %' }}</template>
              </el-table-column>
              <el-table-column align="center" prop="assessCriterion" label="考核标准"></el-table-column>
              <el-table-column align="center" prop="nickName" label="评分人"></el-table-column>
              <el-table-column align="center" prop="score" label="分数">
                <template slot-scope="scope">
                  <span v-if="scope.row.score !== null">{{scope.row.score}}</span>
                  <span v-if="scope.row.score === null">未评分</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="calculate" label="得分">
                <template slot-scope="scope">
                  <span v-if="scope.row.calculate !== null">{{scope.row.calculate}}</span>
                  <span v-if="scope.row.calculate === null">未评分</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <el-dialog title="考核流程" :visible.sync="centerDialogVisible" width="40%" center>
            <div style="height: 300px;">
              <el-steps direction="vertical" finish-status="success" :active="active">
                <el-step :title="createData.createBy +' ' +'发起考核'"
                         :description="
                     parseTime(createData.createTime, '{y}-{m}-{d}')"
                ></el-step>
                <el-step :title="activity.nickName +'  '+ activity.assessFlow"
                         :description="
                     parseTime(activity.updateTime, '{y}-{m}-{d}')"
                         v-for="(activity, index) in activities">
                </el-step>
              </el-steps>
            </div>
            <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
          </span>
          </el-dialog>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

  import {selectRecord, getPlanListByUid} from '@/api/system/record'
  import Template from "@/views/system/email/ItoTemplate";
  import {
    getEmpInfoFlow,
    getAssessEmpInfo
  } from '@/api/system/assessInfo'

  //绩效档案
  export default {
    name: "record",
    components: {Template},
    data() {
      return {
        activeName: 'first',
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          nickName: ''
        },
        assessEmpInfoList: [],
        empInfoList:[],
        total: 0,
        scoreForm: {
          assessmentEmpList: []
        },
        createData: {
          createTime: null,
          createBy: null
        },
        activities: [],
        active: 1,
        centerDialogVisible:false,
        loading:false
      }

    },
    created() {
      this.getList()
    },
    methods: {
      goFirst() {
        this.activeName = 'first'
        this.resetQuery()
      },
      goSecond(){
        this.activeName = 'second'
      },
      empInfoFlow(aid,uid){
        this.centerDialogVisible = true
        getEmpInfoFlow(aid,uid).then(res => {
          console.log(res)
          this.createData.createTime = res.data[0].createTime
          this.createData.createBy = res.data[0].createBy
          this.activities = res.data
          res.data.map(r => {
            if (res.data[0].status === '0') {
              this.active = 1
              return;
            }else if(r.status === '1'){
              this.active = r.sequence + 1
            }
          })
        })
      },
      getList() {
        this.loading = true
        selectRecord(this.queryParams).then(res => {
          this.assessEmpInfoList = res.rows
          this.loading = false
          this.total = res.total
        })
      },
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      resetQuery() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          nickName: ''
        }
        this.getList()
      },
      secondInfoClick(uid) {
        this.loading = true
        getPlanListByUid(uid).then(res => {
          this.loading = false
          this.scoreForm.assessmentEmpList = res.data
          this.activeName = 'second'
        })
      },
      thirdInfoClick(row) {
        this.loading = true
        getAssessEmpInfo(row.aid, row.uid).then(res => {
          this.loading = false
          this.empInfoList = res.data
          this.activeName = 'third'
        })
      }
    },
    mounted() {
      //tab标签的权限控制
      this.$nextTick(() => {
        //首先把所有的都隐藏
        this.$refs.tabs.$children[0].$refs.tabs[0].style.display = 'none';
        this.$refs.tabs.$children[0].$refs.tabs[1].style.display = 'none';
        this.$refs.tabs.$children[0].$refs.tabs[2].style.display = 'none';
      });
    }
  }
</script>

<style scoped>

</style>
